<template>
	<view class='page_cont'>
		<view class='page' :class="show_page?'left':''">
			<view class='top_wrap'>
				<view class='title_wrap'>
					<view class='title'>找回密码</view>
					<view class='subtitle'>您正在通过手机验证找回密码</view>
				</view>
				<image class='logo' src="https://ossdev0.jiabala.com/5y6xEH8MGybeH"></image>
			</view>
			<view class='box'>
			    <input class='input' maxlength="11" @input="input_mobile" placeholder="请输入手机号" placeholder-style="color:rgba(66,71,82,0.5);"></input>
			</view>
			<view class='box'>
			    <input class='input' maxlength="6" @input="input_code" placeholder="请输入验证码" placeholder-style="color:rgba(66,71,82,0.5);"></input>
				<view class="btn" @click="send_code()" v-if="show_btn">发送验证码</view>
				<view class='text' v-else>重新发送({{time}})</view>
			</view>
			<view class='send_btn' :style="{background:mobile&&code?'rgba(91,144,255,1)':'rgba(91,144,255,0.5)'}" @click="confirm_mobile()">确定</view>
		</view>
		<view class='page' :class="show_page?'':'right'">
			<view class='top_wrap'>
				<view class='title_wrap'>
					<view class='title'>找回密码</view>
					<view class='subtitle'>修改密码后可重新登录</view>
				</view>
				<image class='logo' src="https://ossdev0.jiabala.com/5y6xEH8MGybeH"></image>
			</view>
			<view class='box'>
			    <input class='input' maxlength="16" @input="input_new" placeholder="请输入6-16位新密码" placeholder-style="color:rgba(66,71,82,0.5);"></input>
			</view>
			<view class='box'>
			    <input class='input' maxlength="16" @input="input_again" placeholder="确认密码" placeholder-style="color:rgba(66,71,82,0.5);"></input>
			</view>
			<view class='point' v-if="show_ti">
				<image class='icon' src="/static/icon53.png"></image>
				<view class='text'>{{text}}</view>
			</view>
			<view class='send_btn' :style="{background:mobile&&code?'rgba(91,144,255,1)':'rgba(91,144,255,0.5)'}" @click="confirm_password()">确定</view>
		</view>
	</view>
</template>

<script>
	import config from "../../api/config.js"
	import encryption from "../../utils/md5.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return{
				show_page: false,
				mobile: '',
				code: '',
				agree: true,
				show_btn: true,
				time: 59,
				password: '',
				againPassword: '',
				show_ti: false,
				text: ''
			}
		},
		methods:{
			//手机号
			input_mobile(e){
				this.mobile=e.detail.value;
			},
			// 验证码
			input_code(e){
				this.code=e.detail.value;
			},
			// 发送验证码
			send_code(){
				if(!util.testMobile(this.mobile)||this.mobile==''){
					util.page_show_toast('手机号码输入有误',1500)
				}else{
					this.user_send_code();
				}
			},
			// 确定
			confirm_mobile(){
				if(!util.testMobile(this.mobile)||this.mobile==''){
					util.page_show_toast('手机号码输入有误',1500)
					return false;
				}
				if(this.code==''){
					util.page_show_toast('验证码输入有误',1500)
					return false;
				}
				this.very_code();
			},
			// 新密码
			input_new(e){
				this.password=e.detail.value;
			},
			// 确认密码
			input_again(e){
				this.againPassword=e.detail.value;
			},
			// 修改
			confirm_password(){
				if(!this.password||!this.againPassword){
					this.show_ti=true;
					this.text="密码不能为空"
					return false;
				}
				if(this.password.length<6||this.againPassword.length<6){
					this.show_ti=true;
					this.text="密码长度不能少于6为位"
					return false;
				}
				if(this.password != this.againPassword){
					this.show_ti=true;
					this.text="新密码输入不一致"
					return false;
				}
				//
				this.show_ti=false;
				this.set_password_bycode();
			},
			// 发送验证码
			user_send_code(){
				var params={
					"phone": this.mobile
				}
				config.send_code(params).then(res=>{
					util.page_show_toast("验证码发送成功",1500);
					this.show_btn=false;
					var timer=setInterval(()=>{
						this.time--;
						if(this.time<=0){
							this.show_btn=true;
							this.time=59;
							clearInterval(timer)
						}
					},1000)
				})
			},
			// 验证手机验证码
			very_code(){
				var params={
					"phone": this.mobile,
					"code": this.code
				}
				config.very_code(params).then(res=>{
					this.show_page=true;
				})
			},
			// 验证码设置密码
			set_password_bycode(){
				var params={
				      "phone": this.mobile,
				      "password": encryption.md5(this.password)
				    }
				config.set_password_bycode(params).then(res=>{
					util.page_show_toast("修改成功",1500);
					uni.navigateBack({
						delta: 1
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.page_cont{
		width: 0;
		.page{
			position: fixed;
			/* #ifdef MP-WEIXIN */
			top: 0;
			/* #endif */
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			left: 0;
			width: 100%;
			padding: 64rpx 48rpx;
			box-sizing: border-box;
			z-index: 999;
			transition: all 0.3s;
			.top_wrap{
				width: 100%;
				display: flex;
				flex-direction: row;
				margin-bottom: 172rpx;
				.title_wrap{
					flex: 1;
					.title{
						text-align: left;
						height: 74rpx;
						font-size: 52rpx;
						font-weight: 400;
						line-height: 74rpx;
						color: #3F4A58;
						margin-bottom: 4rpx;
					}
					.subtitle{
						text-align: left;
						height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: #929BA7;
					}
				}
				.logo{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
			.box{
				padding: 32rpx 32rpx 32rpx 44rpx;
				background: #F7F9FB;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 32rpx;
				.input{
					flex: 1;
					text-align: left;
					min-height: 36rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color:rgba(66,71,82,1);
				}
				.btn{
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color: #5B90FF;
				}
				.text{
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color: rgba(91,144,255,0.5);
				}
			}
			.point{
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon{
					width: 28rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}
				.text{
					flex: 1;
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #F64D32;
				}
			}
			.send_btn{
				margin: 48rpx 0 32rpx 0;
				height: 104rpx;
				line-height: 104rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 16rpx;
				font-weight:600;
				color: #fff;
				letter-spacing:4rpx;
			}
		}
		.left{
			left: -100%;
		}
		.right{
			left: 100%;
		}
	}
</style>
